<script setup lang='ts'>
  import { reactive } from 'vue';
  import { guild_roomApi } from '@/api/controller';
  import { ToastWarning, Toastloading } from '@/utils/public';
  import { utf16toEntities } from '@/utils'
  import table2excel from 'js-table2excel';

  const action = reactive({
    dialogFormVisible:false,
    title:'',
    room_id:0,
    formtype:0,
    list:[] as Array<any>
  })
  let queryForm = {
    room_id:0
  }
  const handleDownload = () => {
    if(action.list.length == 1) return ToastWarning('暂无可导出数据')
    const tHeader = [
      { title: '用户ID', key: "uuid"},
      { title: '用户昵称', key: "nickname"},
      { title: '用户身份', key: "is_anchor"},
      { title: `${action.title}值`, key: "room_wealth_value"}
    ]
    const list = action.list.map((res:any)=>{
      const { room_wealth_value, is_anchor, uuid, nickname } = res
      return {
        uuid,
        nickname:utf16toEntities(nickname),
        room_wealth_value:room_wealth_value / 10,
        is_anchor:['用户','主播'][is_anchor] || ''
      }
    })
    table2excel({
      column:tHeader, data:list, excelName:`${action.title}榜`
    })
  };
  
  const getList = async()=>{
    let { formtype } = action
    action.list = []
    const loading = Toastloading()
    // 魅力榜
    if(formtype == 1) {
      const res = await guild_roomApi.getRooCharmValList(queryForm.room_id,queryForm)
      loading.close()
      const { data=[] } = res.data
      action.list = data
    }
    // 财富榜
    if(formtype == 2) {
      const res = await guild_roomApi.getwaterList(queryForm.room_id, queryForm)
      loading.close()
      const { data=[] } = res.data
      action.list = data
    }
  }
  const openDialog = async(query:any = {})=> {
    const { formtype } = query
    query['page'] = 1
    query['limit'] = 300
    queryForm = query
    if(formtype == 1) action.title = '魅力'
    if(formtype == 2) action.title = '财富'
    action.formtype = formtype
    await getList()
    action.dialogFormVisible = true
  }
  defineExpose({
    openDialog
  })
</script>

<template>
  <div>
    <el-dialog
    top="5vh"
    class="xm-dialog input-width"
    v-model="action.dialogFormVisible"
    width="50%"
    :title="action.title+'榜查询'">
    <el-button class="xm-mb10 xm-mrAuto" type="warning" @click="handleDownload">导 出</el-button>
    <el-table class="xm-TableCenter" height="400px" :data="action.list" border>
      <el-table-column prop="uuid" label="用户ID" />
      <el-table-column prop="nickname" label="用户昵称" />
      <el-table-column prop="name" label="用户身份">
        <template #default="scope">
          {{ ['用户','主播'][scope.row.is_anchor] }}
        </template>
      </el-table-column>
      <el-table-column :label="`${action.title}值`" align="center">
        <template #default="scope">
          <span>{{ scope.row.room_wealth_value / 10 }}</span>
        </template>
      </el-table-column>
    </el-table>
    </el-dialog>
  </div>
</template>